<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/roboto@4.5.0/400.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar {
      width: 10px;
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #1b76d2;
      background-image: -webkit-gradient(linear, 0 0, 0 100%,
          color-stop(.5, rgba(255, 255, 255, .2)),
          color-stop(.5, transparent), to(transparent));
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.6/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.6/dist/vuetify.min.js"></script>
  <!-- 加载编辑器 -->
  <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict/ace.js"></script>
  <script>
    ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict/');
    window.onbeforeunload = function () { return "确定离开当前页吗？"; }
  </script>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script>
    class HA {
      constructor() {
        // url参数
        let query = new URLSearchParams(location.search)
        this.query = (key) => {
          let val = query.get(key)
          if (val) {
            return decodeURIComponent(val)
          }
          return val
        }
        this.ver = this.query('ver')
      }

      get hass() {
        const homeassistant = top.document.querySelector('home-assistant')
        return homeassistant ? homeassistant.hass : null
      }

      fullscreen() {
        try {
          let haPanelIframe = top.document.body
            .querySelector("home-assistant")
            .shadowRoot.querySelector("home-assistant-main")
            .shadowRoot.querySelector("app-drawer-layout partial-panel-resolver ha-panel-iframe").shadowRoot
          let ha_card = haPanelIframe.querySelector("iframe");
          ha_card.style.position = 'absolute'
          haPanelIframe.querySelector('app-toolbar').style.display = 'none'
          ha_card.style.top = '0'
          ha_card.style.height = '100%'
        } catch {

        }
      }

      // 触发事件
      fire(type, data, ele = null) {
        console.log(type, data)
        const event = new top.Event(type, {
          bubbles: true,
          cancelable: false,
          composed: true
        });
        event.detail = data;
        if (!ele) {
          ele = top.document.querySelector("home-assistant")
            .shadowRoot.querySelector("home-assistant-main")
            .shadowRoot.querySelector("app-drawer-layout")
        }
        ele.dispatchEvent(event);
      }

      post(params) {
        return this.fetch('/ha_file_explorer-api', params, 'post')
      }

      put(params) {
        return this.fetch('/ha_file_explorer-api', params, 'put')
      }

      callService(name, params = {}) {
        const arr = name.split('.')
        return this.hass.callService(arr[0], arr[1], params)
      }

      // http请求
      async fetch(url, params, method) {
        const body = toString.call(params) == '[object FormData]' ? params : JSON.stringify(params)
        const { hass } = this
        if (!hass) {
          return fetch(top.location.origin + url, {
            method,
            body,
            headers: {
              authorization: 'Bearer ' + hass.auth.data.access_token
            }
          }).then(res => res.json())
        }
        return hass.fetchWithAuth(url, {
          method,
          body
        }).then(async res => {
          const contentType = res.headers.get('Content-Type')
          if (contentType === 'application/octet-stream') {
            const blob = await res.blob()
            let bl = new Blob([blob], { type: blob.type });
            var link = top.document.createElement('a');
            link.href = top.URL.createObjectURL(blob);
            link.download = params.path.substr(params.path.lastIndexOf('/') + 1)
            link.click();
            top.URL.revokeObjectURL(link.href)
            return { msg: '下载成功' }
          }
          return res.json()
        })
      }
    }

    window.ha = new HA();
    window.ha.fullscreen()


  </script>
</body>

</html>